<template>
	<view class="my">
		<!-- 背景图 -->
		<view class="bjImage">
			<image src="@/static/board_bg.png" mode=""></image>
			<view class="k">
				<view class="" style="display: flex;" @click="Jump('/pages/my/userInfo')">
					<view class="avatar-box ss-m-r-24">
						<image
						  class="avatar-img"
						  :src="
						    userInfo.avatar
						      ? userInfo.avatar
						      : 'https://xbnl.westts.cn/assets/addons/shopro/uniapp/default_avatar.png'
						  "
						  mode="aspectFill"
						  @tap="sheep.$router.go('/pages/user/info')"
						></image>
					  <!-- <image
					    class="avatar-img"
					    src="'https://xbnl.westts.cn/assets/addons/shopro/uniapp/default_avatar.png'"
					    mode="aspectFill"
					    @tap="sheep.$router.go('/pages/user/info')"
					  ></image> -->
					</view>
					<!-- <u-avatar :src="userInfo.avatar" size="60" /> -->
					<view class="name" v-if="userInfo.id">
						<view class="">{{userInfo.nickname}}</view>
						<view class="" style="font-size: 28rpx;">{{userInfo.id}}</view>
					</view>
					<view class="name" v-if="!userInfo.id" style="line-height: 90rpx;font-size: 36rpx;"
						@tap.stop="Jump('/pages/bind/login')">登录</view>
				</view>
			</view>
		</view>
		<view class="two">
			<view class="two_box">
				<view class="">
					<view class="">
						今日总收益
					</view>
					<view class="two_b" style="color: #E84010;">
						￥11160
					</view>
				</view>
				<image src="@/static/today_m.png" mode=""></image>
			</view>
			<view class="line"></view>
			<view class="two_box">
				<view class="">
					<view class="">
						累计总收益
					</view>
					<view class="two_b" style="color: #FC8E23;">
						￥11160
					</view>
				</view>
				<image src="@/static/today_m.png" mode=""></image>
			</view>
		</view>
		<view class="sum">
			<view class="sum_box">
				<view class="">
					￥11160
				</view>
				<view class="sum_b" >
					账户余额 >
				</view>
			</view>
			<view class="line"></view>
			<view class="sum_box">
				<view class="">
					￥11160
				</view>
				<view class="sum_b">
					货款余额 >
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="listBox">
			<view class="list" v-for="(i,index) in three3List" :key="index" @tap.stop="Jump(i.path)"
				:style="{borderBottom:index !=3 ? '2rpx soild rgba(217, 217, 217, 0.4);':'none'}">
				<view class="" style="display: flex;">
					<view class="" style="padding: 4rpx;">
						<image :src="i.url" mode="widthFix"></image>
					</view>

					<view class="text">{{i.title}}</view>
				</view>
				<u-icon name="arrow-right" size="16" color="#B6B6B6"></u-icon>
			</view>
		</view>
		<view class="button" v-if="userInfo.mobile" @tap.stop="handleLogout()"> 退出登录 </view>
		<u-modal :show="delShow" title="退出登录" content="确认退出登录吗？" close-on-click-overlay show-cancel-button
			@close="closeDel" @cancel="closeDel" @confirm="handleDel" />

	</view>
</template>

<script setup>
	// import {
	// 	getuserinfo,
	// 	logout
	// } from "@/request/myApi.js";
	import { staticUrl } from '@/sheep/config';
	export default {
		data() {
			return {
				userInfo: {},
				delShow: false, // 退出登录
				three3List: [{
						url: '/static/icon_1.png',
						title: '我的市场',
						path: '/pages/my/collect?type=2'
					},
					{
						url: '/static/icon_2.png',
						title: '合伙人分红',
						path: '/pages/my/collect?type=1'
					},
					{
						url: '/static/icon_3.png',
						title: '收/支明细',
						path: '/pages/my/train'
					},
					{
						url: '/static/icon_4.png',
						title: '我的订单',
						path: '/pages/my/coin'
					},
					{
						url: '/static/icon_5.png',
						title: '地址管理',
						path: '/pages/my/editCode'
					}, {
						url: '/static/icon_6.png',
						title: '授权中心',
						path: '/pages/my/train'
					},
					{
						url: '/static/icon_7.png',
						title: '分享',
						path: '/pages/my/coin'
					},
					{
						url: '/static/icon_8.png',
						title: '设置',
						path: '/pages/my/editCode'
					}
				]
			};
		},
		onLoad() {

		},
		onShow() {
			this.userInfo = {}
			this.getUserInfo()
		},
		methods: {
			// 关闭退出登录弹窗
			closeDel() {
				this.delShow = false;
			},
			// 打开退出登录弹窗
			handleLogout() {
				this.delShow = true;
			},
			// 退出登录
			handleDel() {
				this.delShow = false;
				logout().then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '退出成功！',
							icon: "none",
						});
						this.userInfo = {}
						this.getUserInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
						this.userInfo = {}
						console.log(this.userInfo, 'this.userInfo')
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				let that = this
				that.userInfo = {
					nickName: 'Hi～，周鑫鑫、',
					id: '151757311',
					levelText: '微店主',
					avatar:'https://xbnl.westts.cn/assets/addons/shopro/img/admin/default_logo.png'
				}
				
				return
				getuserinfo().then(res => {
					if (res.code == 200) {
						let arr = ['会员','微店主','店主','代理','合伙人','联创','董事','个体']
						that.userInfo = res.data.map(item => {
							return{
								...item,
								levelText:arr[item.level]
							}
						})
					} else {
						console.log('p')
						that.userInfo = {}
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				})
			},

			// 跳转
			Jump(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #fff;
	}

	button {
		margin: 0;
		padding: 0;
		border: none;
		background: none;
	}

    .avatar-box {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100rpx;
        height: 100rpx;
      }
    }
	.button {
		width: 85%;
		height: 80rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		margin: 0 auto;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		background-color: #466EC5;
		border-radius: 20rpx;
	}

	button::after {
		border: none;
	}

	.record {
		position: absolute;
		left: 9%;
		top: 42%;
		color: #fff;
		font-size: 22rpx;
		z-index: 1000;
	}

	.my {
		width: 100vw;

		.sum {
			position: absolute;
			top: 32%;
			left: 4%;
			border-radius: 20rpx;
			width: 92%;
			display: flex;
			height: 160rpx;
			border: 2rpx solid #f8f8f9;
			box-shadow: 0 0 16rpx rgba(0, 0, 0, .1);

			.line {
				width: 2rpx;
				height: 50rpx;
				margin-top: 58rpx;
				background-color: #D9D9D999;
			}

			.sum_box {
				text-align: center;
				width: 48%;
				padding: 30rpx;
				color: #1d1b20;
				font-size: 26rpx;

				view {
					padding: 6rpx 0;
				}

				.sum_b {
					color: #979797;
					font-size: 28rpx;
				}

				image {
					height: 76rpx;
					width: 76rpx;
				}
			}
		}

		.two {
			position: absolute;
			top: 21%;
			background: #fff;
			left: 4%;
			border-radius: 20rpx;
			width: 92%;
			display: flex;
			height: 160rpx;
			border: 2rpx solid #f8f8f9;
			box-shadow: 0 0 16rpx rgba(0, 0, 0, .1);

			.line {
				width: 2rpx;
				height: 50rpx;
				margin-top: 58rpx;
				background-color: #D9D9D999;
			}

			.two_box {
				width: 48%;
				display: flex;
				align-items: center;
				padding: 30rpx;
				justify-content: space-between;
				color: #1D1B20;
				font-size: 28rpx;

				view {
					padding: 6rpx 0;
				}

				.two_b {
					font-size: 26rpx;
				}

				image {
					height: 76rpx;
					width: 76rpx;
				}
			}
		}

		.bjImage {
			width: 100%;

			image {
				width: 100%;
				height: 420rpx;

			}

			.k {
				width: 656rpx;
				height: 126rpx;
				display: flex;
				border: 1px soild black;
				position: absolute;
				top: 224rpx;
				left: 50rpx;
				overflow: hidden;
				justify-content: space-between;

				// border-radius: 50%;
				.image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.name {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					height: 120rpx;
					padding: 14rpx 30rpx;
					color: #fff;
					font-size: 30rpx;
					box-sizing: border-box;
				}
			}
		}

		.listBox {
			width: 92%;
			margin: 40rpx auto;
			padding: 30rpx;
			position: absolute;
			top: 40%;

			.list {
				width: 100%;
				padding: 24rpx 20rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				border-bottom: 2rpx solid rgba(217, 217, 217, 0.4);
				image {
					width: 30rpx;
					margin-right: 30rpx;
				}
				.text {
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 2rpx;
				}
				&:last-child {
					border-bottom: none;
				}
			}
		}

	}
</style>